<template>
  <el-dialog title="文章新增" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="closeHandle">关闭页面</el-button>
    <el-form size="medium" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
      <el-form-item label="微信公众号" prop="wxAccount">
        <el-select v-model="dataForm.wxAccount" placeholder="请选择">
          <el-option v-for="item in wxAccountOptions" :key="item.account" :label="item.name" :value="item.account"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文章类型" prop="articleType">
        <el-select v-model="dataForm.articleType" placeholder="请选择" clearable>
          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="dataForm.title"></el-input>
      </el-form-item>
      <el-form-item label="文章描述" prop="articleDescribes">
        <el-input v-model="dataForm.articleDescribes"></el-input>
      </el-form-item>
      <el-form-item label="标题图片" prop="imageId">
        <el-input v-model="dataForm.imageUrl" disabled>
          <el-upload slot="append"
            class="upload-demo"
            :show-file-list="false"
            action="/mp/wxImage/uploadMediaToWechat"
            :headers="headers"
            :data="das"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :disabled="!dataForm.wxAccount"
            >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <el-input type="textarea" rows="6" v-model="dataForm.content"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="medium" type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>保 存</el-button>
      <el-checkbox v-model="checked" style="margin-left: 15px;">发布</el-checkbox>
    </span>

  </el-dialog>
</template>

<script>
  import store from '@/store'
  import { fetchAccountList } from '@/api/mp/wxaccount'
  import { getWxArticleTypeList } from '@/api/mp/wxarticletype'
  import { getWxArticleObj, addWxArticleObj, putWxArticleObj } from '@/api/mp/wxarticle'
  import { WxMaterialDel } from '@/api/mp/wxmaterial'

  export default {
    data(){
      return {
        visible: false,
        ischeck: false,
        checked: false,
        headers: {
          'Authorization': 'Bearer ' + store.getters.access_token,
        },
        das: {},
        wxAccountOptions: [],
        typeList: [],
        dataForm: {
          id:'',
          wxAccount: '',
          articleType: '',
          title: '',
          articleDescribes: '',
          imageMediaId: '',
          imageUrl: '',
          releaseFlag: '0',
        },
        dataRule: {
          typeName: [{required: true,message: '文章类型名称不能为空',trigger: 'blur'}]
        }
      }
    },
    methods: {
      init(id){
        this.visible = true
        this.originMediaIds = []
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.dataForm.id = id || 0
        this.$set(this.dataForm,'id',id || 0)
        this.$set(this.dataForm,'mediaId','')
        this.$set(this.dataForm,'imageMediaId','')

        this.getAccountList()
        this.getArticleType()
        this.$nextTick(() => {
          if (this.dataForm.id) {
            getWxArticleObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
              this.oldPicId = this.dataForm.imageMediaId
              this.originMediaIds.push(this.oldPicId)
              if(this.dataForm.releaseFlag == '1'){
                this.checked = true
              }else{
                this.checked = false
              }
            })
          }
        })
      },
      // 获取微信公众号列表
      getAccountList() {
        fetchAccountList().then(result => {
          this.wxAccountOptions = result.data.data
        })
      },
      // 获取文章类型列表
      getArticleType(){
        getWxArticleTypeList().then(result => {
          this.typeList = result.data.data
        })
      },
      // 上传图片之前
      beforeUpload(file){
        this.$set(this.das,'wxAccount',this.dataForm.wxAccount)
        this.$set(this.das,'type','thumb')
      },
      handleSuccess(res,file){
        if(res.data){
          this.$set(this.dataForm,'imageUrl',res.data.url)
          // this.$set(this.dataForm,'mediaId',res.data.mediaId)
          this.$set(this.dataForm,'imageMediaId',res.data.mediaId)

          this.originMediaIds.push(res.data.mediaId)
        }
        // this.$set(this.dataForm,'imageId',res.data.data.imageId)
        // this.$set(this.dataForm,'imageName',res.data.data.fileName)
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let delIndex = this.originMediaIds.length - 1
            this.originMediaIds.splice(delIndex,1)
            this.dataForm.originMediaIds = this.originMediaIds
            if(this.checked){
              this.$set(this.dataForm,'releaseFlag','1')
            }else{
              this.$set(this.dataForm,'releaseFlag','0')
            }
            if (this.dataForm.id) {
              putWxArticleObj(this.dataForm).then(data => {
                this.$message.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
              });
            } else {
              addWxArticleObj(this.dataForm).then(data => {
                this.$message.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            }
          }
        })
      },
      // 关闭弹窗
      closeHandle(){
        if(this.oldPicId){
          let delIndex = this.originMediaIds.findIndex(item => item === this.oldPicId)
          this.originMediaIds.splice(delIndex, 1)
        }
        if(this.dataForm.wxAccount && this.originMediaIds.length > 0){
          WxMaterialDel({wxAccount: this.dataForm.wxAccount,originMediaIds: this.originMediaIds})
        }
        this.visible = false
      }
    }
  }
</script>

<style>
  table {
    width: 100%;
  }

  tr td {
    border: solid 1px #e7e7e7;
  }
</style>
